<style scoped lang="less">
.layout{
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-header-bar{
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-footer-center{
  text-align: center;
}
.dev-run-preview .dev-run-preview-edit{ display: none }
</style>
<template>
  <div class="layout">
    <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto', fontWeight: '600'}">
      <Menu  theme="dark" width="auto" :active-name="active" :open-names="[group]" v-if="menusList.length > 0" @on-select="changeMenuItem">
        <div class="layout-nav">
          <div v-for="(item, index) in menusList" :key="index">
            <Submenu :name="item.key" v-if="item.children && item.children.length > 0">
              <template #title>
                <Icon :type="item.icon" />
                <span>{{item.name}}</span>
              </template>
              <MenuItem :name="child.key" v-for="(child, i) in item.children" :key="i" @click.native="toPathLink(child.link)">
                {{child.name}}
              </MenuItem>
            </Submenu>
            <MenuItem :name="item.key" class="menu-item" @click.native="toPathLink(item.link)" v-else>
              <Icon :type="item.icon" /> {{item.name}}
            </MenuItem>
          </div>
        </div>
      </Menu>
    </Sider>
    <Layout :style="{marginLeft: '200px'}">
      <Header :style="{padding: '0 30px', background: '#FFF'}" class="layout-header-bar">
        <Row>
          <Col span="12">
            <Breadcrumb >
              <BreadcrumbItem @click="toPathLink('/')">首页</BreadcrumbItem>
              <BreadcrumbItem>{{$route.meta.title}}</BreadcrumbItem>
            </Breadcrumb>
          </Col>
          <Col span="12">
            <div style="text-align: right;">
              <Dropdown>
                <a href="javascript:void(0)">
                  {{userInfo.name}}（{{userInfo.email}}）
                  <Icon type="ios-arrow-down"></Icon>
                </a>
                <template #list>
                  <DropdownMenu style="text-align: left;">
                    <DropdownItem>修改资料</DropdownItem>
                    <DropdownItem @click="logout">退出登录</DropdownItem>
                  </DropdownMenu>
                </template>
              </Dropdown>
            </div>
          </Col>
        </Row>


      </Header>
      <Content :style="{padding: '16px', minHeight: '450px', overflow: 'hidden'}">
        <div style="overflow-y: auto;">
          <Card :title="title">
            <transition name="slide-right">
              <router-view />
            </transition>
          </Card>
        </div>
      </Content>
      <Footer class="layout-footer-center">2024 &copy; Template</Footer>
    </Layout>
  </div>
</template>
<script>
import {mapState, mapActions, mapGetters} from 'vuex';
import util from "@/libs/util";

export default {
  name: "layout",
  components: {
  },
  data() {
    return {
      // 目录定位
      active: this.$route.meta.module,
      title: this.$route.meta.title,
      group: this.$route.meta.group,
      meta: this.$route.meta,
      // 是否合并目录
      isCollapse: false,
    }
  },


  computed: {
    ...mapState({
      userInfo: state => state.user.data
    }),
    // 目录
    menusList() {
      return this.userInfo.role ? this.userInfo.role.admin_menus : [];
    }

  },

  watch: {
    $route() {
      this.title = this.$route.meta.title;
    }
  },

  methods: {
    ...mapActions({}),


    /**
     * 修改
     * @param index
     */
    changeMenuItem(index) {

    },

    /**
     * 跳转
     * @param path
     * @param query
     */
    toPathLink(path, query) {
      this.$router.push({path, query});
    },

    /**
     * 退出登录
     */
    logout() {
      util.wsCache.set("crmToken", null);
      this.toPathLink('/login')
    }
  }

}
</script>
